
// import { template } from "handlebars";

$(function () {

    var currentPage = 1;
    var pageSize = 3;
    var picArr = [];

    function render() {
        $.ajax({
            url: '/product/queryProductDetailList',
            data: {
                pageSize: pageSize,
                page: currentPage
            },
            dataType: 'json',
            success: function (info) {
                // console.log(info);
                $('tbody').html(template('tmp', info))
                setPage(info.total);
            }
        })
    }
    render();

    function setPage(total) {
        $('.paginator').bootstrapPaginator({
            //设置版本号/默认是2，如果是bootstrap3版本，这个参数必填
            bootstrapMajorVersion: 3,
            // 显示第几页
            currentPage: currentPage,
            // 总页数
            totalPages: Math.ceil(total / pageSize),
            //当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
            onPageClicked: function (event, originalEvent, type, page) {
                // 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
                currentPage = page;
                render();
            }
        })
    }

    $('.btn-two').click(function () {
        $.ajax({
            url: '/category/querySecondCategoryPaging',
            data: {
                page: 1,
                pageSize: 100
            },
            success: function (info) {
                // console.log(info);
                $('.dropdown-menu').html(template('menu', info));
            }
        })
    })
    // 3 注册事件委托, 给 a 注册点击事件
    $('.dropdown-menu').on('click', 'a', function () {
        // console.log(1);
        var txt = $(this).text();
        var id = $(this).data('id');
        $('.btn-text').text(txt);
        $('.brandId').val(id);
        // 设置隐藏域
        $('#form').data('bootstrapValidator').updateStatus('brandId','VALID');
    })

    // 4 配置上传图片回调函数,上传商品图片，只能上传三张 
    // 其实多张图片上传，就是 多个单张图片上传 
    $('#fileupload').fileupload({
        dataType:'json',
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done:function(e,data){

            var result = data.result;
            // console.log(result);
            picArr.unshift(result)
            $('.img-box').prepend('<img src="'+ result.picAddr +'" height="80">')

            if(picArr.length>3){
                picArr.pop();
                $('.img-box img:last-child').remove();
            }
            // console.log(pic);
            if(picArr.length == 3){
                $('#form').data('bootstrapValidator').updateStatus('imgStatus','VALID');            
            }

            // 知其然而不知其所以然
        }
    })



    // 表单验证
    $('#form').bootstrapValidator({
        // 将默认的排除项, 重置掉 (默认会对 :hidden, :disabled等进行排除)
        excluded: [],
        // 配置图标
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            brandId: {
                validators: {
                    notEmpty: {
                        message: '请选择二级分类'
                    }
                }
            },
            // 商品名称
            proName: {
                validators: {
                    notEmpty: {
                        message: "请输入商品名称"
                    }
                }
            },
            // 商品描述
            proDesc: {
                validators: {
                    notEmpty: {
                        message: "请输入商品描述"
                    }
                }
            },
            // 商品价格
            price: {
                validators: {
                    notEmpty: {
                        message: "请输入商品价格"
                    },
                    regexp:{
                        regexp:/^[1-9]\d*$|^\d*\.\d*$/,
                        message:'整数或小数'
                    }
                }
            },
            // 商品原价
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: "请输入商品原价"
                    },
                    regexp:{
                        regexp:/^[1-9]\d*\.?\d*$/,
                        message:'整数或小数'
                    }
                }
            },
            // 标记图片是否上传满三张
            imgStatus: {
                validators: {
                    notEmpty: {
                        message: "请上传3张图片"
                    }
                }
            },
            // 商品库存
            // 要求: 必须是非零开头的数字, 非零开头, 也就是只能以 1-9 开头
            // 数字: \d
            // + 表示一个或多个
            // * 表示零个或多个
            // ? 表示零个或1个
            // {n} 表示出现 n 次
            num: {
                validators: {
                    notEmpty: {
                        message: "请输入商品库存"
                    },
                    //正则校验
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '商品库存格式, 必须是非零开头的数字'
                    }
                }
            },
            // 尺码校验, 规则必须是 32-40, 两个数字-两个数字
            size: {
                validators: {
                    notEmpty: {
                        message: "请输入商品尺码"
                    },
                    //正则校验
                    regexp: {
                        regexp: /^\d{2}-\d{2}$/,
                        message: '尺码格式, 必须是 32-40'
                    }
                }
            }
            
        }
    })
    // --------------------------
    // 注册校验成功事件
    $('#form').on('success.form.bv',function(e){
        e.preventDefault();
        var str = $('#form').serialize();
        // var params = new FormData($('#form')[0]);
        // console.log(params);
        picArr = JSON.stringify(picArr);//转成json字符串
        str += '&picArr+'+picArr;
        // console.log(str);
        



        $.ajax({
            url:'/product/addProduct',
            data:str,
            type:'post',
            success:function(info){
                currentPage = 1;
                render();
                $('#form').data('bootstrapValidator').resetForm(true);
                $('.btn-text').text('请选择二级分类');
                $('.img-box').empty();
                $('.modal-add').modal('hide');
                picArr = [];
                
            }
        })
        

    })
    
    
})